<template>
  <div>
    <Title title="毕业生工作状态"></Title>
    <div class="top_item" ref="tu">
      <MyEearts :option="option"></MyEearts>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, shallowRef } from 'vue'
import * as echarts from 'echarts'
import Title from '../commont/Title.vue'
import MyEearts from '../commont/MyEearts.vue'
import { getstatus } from '../../request/index'
// const tu = shallowRef()
let option = ref({
  legend: {
    bottom: '0',
    data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5'],
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [80, 120],
      center: ['50%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 0
      },
      data: [
        { value: 80, name: 'rose1' },
        { value: 30, name: 'rose2' },
        { value: 10, name: 'rose3' },
        { value: 24, name: 'rose4' },
        { value: 22, name: 'rose5' }
      ],
      label: {
        fontSize: '16px',
        formatter: '{d}%'
      }
    }
  ]
})
onMounted(() => {
  //用类似于react里面useRef
  // var myChart = echarts.init(tu.value)
  // myChart.setOption(option)
  getstatus().then((res) => {
    // console.log(res)
    let names = res.data.data.result.map((item, index) => {
      let na = []
      switch (item.status) {
        case '1':
          na = '已就业'
          break
        case '2':
          na = '未就业'
          break
        case '3':
          na = '返回未就业'
          break
        case '5':
          na = '以往未就业'
          break
        default:
          break
      }
      return na
    })
    option.value.legend.data = names
    option.value.series[0].data = res.data.data.result.map((item, index) => {
      return { value: item.total, name: names[index] }
    })
  })
})
</script>


<style  scoped lang='scss'>
.top_item {
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  height: 410px;
  background: #0c1d5f;
}
</style>
